Quick Guide to create HTML messages

Let's practice!
DOs and DON'Ts of inline attachments
Design a good newsletter

- If you don't know some basics about html coding, go learn a bit and come again.

- You must use "absolute URLs" for all the related tags: images, links, forms... (and they will be server from the specified host).

- If you use images, put them in a public web server, so all your recipients can see them.

- You can also use INLINE ATTACHMENTS. This means that you can attach image(s) to your newsletter and they will be displayed where you specify in your HTML code. Read the following rules to do it successfully:

Attach any jpg, gif or png image(s) to your newsletter using the "Attachments..." button.
Use as img tag <img src="cid:myImg"> or <img src=cid:myImg>.
Note that "myImg" is the name of your image without extension: "myImg.jpg" --> "cid:myImg".
Do not use two images named the same (but with different extension) --> "myImg.jpg" & "myImg.png" | NO! |
Test the message using the "Preview" button. If it doesn't work, you did something wrong. Check that the "cid" you use in the "img" tag is the name of the attached image withouth its extension, and make sure you attached the images to the newsletter prior to "Preview" it. NOTE that you must choose at the same time ALL attachments you will use in your newsletter (you can use command+click to select several items).
Send yourself a message and check if it does look as you expected. Otherwise, try again till you feel satisfied, or fire me a BUG message (if you KNOW it is a BUG).


Let's practice!

Well, I will prepare a HTML page to let know all NewsLetter's users that this product has been updated and they can download the newest version. I will use a brief text, a image with NewsLetter's logotype and the url where they can download it. This is the code I would use if I were coding for my website:

my code
<html><body bgcolor="#FFFFFF"><br>
<center>
<font face="Geneva" size="2">The newest version of <a href="/newsletter/index.html">NewsLetter</a> is now available! <br>
C'mon and download it!</font><br><br>
<a href="/newsletter/newsletter.sit"><img src="/newsletter/news.jpg"></a>
</center>
what recipients see

The newest version of NewsLetter is now available!
C'mon and download it!


Well, something was wrong here... I can't see the image, and recipients reported that clicking the "NewsLetter" link won't work. Why?

Very simple. We used "relative URLs". They will work fine in my website and in my hard disk. But my users won't be able to see it, since they don't own the related files. Now, I will fix this and use the images and web pages there are in my public web server at http://homepage.mac.com/.


my code
<html><body bgcolor="#FFFFFF"><br>
<center>
<font face="Geneva" size="2">The newest version of <a href="http://homepage.mac.com/julifos/soft/newsletter/index.html">NewsLetter</a> is now available! <br>
C'mon and download it!</font><br><br>
<a href="http://homepage.mac.com/julifos/soft/newsletter/newsletter.sit"><img src="http://homepage.mac.com/julifos/soft/newsletter/news.jpg"></a>
</center>
what recipients see

The newest version of NewsLetter is now available!
C'mon and download it!



Now, if you have an active internet connection (and I didn't move the stuff in my server), you will see the logotype. Also, you can click the links and they will work as expected.

And this is the "inline attachment" version of the same email:

my code
<html><body bgcolor="#FFFFFF"><br>
<center>
<font face="Geneva" size="2">The newest version of <a href="http://homepage.mac.com/julifos/soft/newsletter/index.html">NewsLetter</a> is now available! <br>
C'mon and download it!</font><br><br>
<a href="http://homepage.mac.com/julifos/soft/newsletter/newsletter.sit"><img src="cid:news"></a>
</center>
what recipients see

The newest version of NewsLetter is now available!
C'mon and download it!


You don't see the image, but it will work fine if you attach your file called "news.jpg" to the newsletter (first, use the Preview button, then send yourself a test message).



DOs and DON'Ts of inline attachments

If you send inline attachments, you will force your user to receive a (eg) 120Kb message. Perhaps he hates lengthy messages, is not able to display HTML contents or configured a rule to delete messages over 100Kb.

If you use absolute URLs, though, pointing to the graphic file in your server, the message will be thin in size and the email client able to display it (it will download the image from the server only if your user decides so).

If you use inline attachments, the look and feel of your message will be allways the same: if your server is down, the message will display fine. If the user reads the message ten years later (when your domain has expired), the message will display fine, because the image is attached to the message.


Design a good newsletter

Some of the following rules are optional and may not allways fit your needs. A background in graphic design and web-design usability, and a bit of common sense will help you to elaborate the best possible newsletter.

- Keep in mind that not all browsers support or even allow HTML messages.

- Email clientes are NOT browsers. Consequently, they can behave strangely or become very slow when displaying HTML messages.

- So, the best newsletter is the simplest one.

- Do not use lots of images or your recipients will hate you (1 image, usually, is the max.).

- Do not use javascript, layers or other advanced technologies. They won't work.

- Use a descriptive and recognizable subject or the recipient could think your message is spam and trash it.

- If the contents of your newsletter are heavy, make a brief abstract and put a link to a website such as "Read more...".

- Circumscribe your stuff to a little "grid". You already know that a mail client is not a browser. So, there is a very little area for the message to be displayed in a single shot, about 400x250 px.

- Avoid absolutelly the casual existence of 2 scrolls, vertical and horizontal (restrict your area).

- A newsletter is not a bulletin news. Use only important or interesting ideas.

- More color is not good design. Lots of type faces and sizes is not good design. Human eye will reject it.

- On the other hand, use white space. There is an old rule which says that when you drop a coin over the page, it must step allways both white space and artwork.

- Use the important news at the beginning (the user will catch them in the first shot).

- Add a "remove me from this newsletter" link to the end.

- Link to your website.

- Distribute it, at least, once a month.